<template>
  <div :style="{ width: '100%', height: '420px', backgroundColor: '#fff' }">
    <div id="jilianGL" :style="{ width: '100%', height: '350px', backgroundColor: '#fff' }"></div>
    <ul>
      <li>
        有计量能耗设备<span>{{ pieData_sx.QTSB }}</span>
      </li>
      <li>
        设备平均有功功率(Kw)<span>{{ pieData_sx.average }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
// 图表链接 https://www.makeapie.com/editor.html?c=xaVrpJdrp
import echarts from 'echarts'
var echartData = {}
export default {
  data() {
    return {}
  },
  props: ['pieData_sx'],
  watch: {
    pieData_sx: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      },
    },
  },
  mounted() {
    echartData = this.pieData_sx
    var myChart = echarts.init(document.getElementById('jilianGL'))
    const abcolor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#2378f7' },
      { offset: 0.7, color: '#2378f7' },
      { offset: 1, color: '#83bff6' },
    ])
    const option = {
      tooltip: {
        formatter: '{a} <br/>{b} : {c} kw',
      },
      title: [
        {
          text: '全网计量设备有功功率(实时)',
          top: 15,
          left: 20,
          textStyle: {
            fontSize: 14,
            color: '#2F3033',
          },
        },
        // {
        //   text: val,
        //   subtext: '有功功率',
        //   bottom: '15%',
        //   left: '44%',
        //   subtextStyle: {
        //     fontSize: 14
        //   },
        //   textStyle: {
        //     fontSize: 14,
        //     color: '#1989FA'
        //     // padding: [0, 0, 0, 40]
        //   }
        // }
      ],
      // toolbox: {
      //   feature: {
      //     restore: {},
      //     saveAsImage: {}
      //   }
      // },
      series: [
        {
          name: '有功功率',
          center: ['50%', '55%'], // 默认全局居中
          type: 'gauge',
          // min: echartData - 100,
          min: 0,
          max: 200,
          detail: {
            formatter: '{value} kw',
            color: '#333',
            fontWeight: 600,
            fontSize: 14,
          },
          data: [
            {
              value: echartData.power,
              name: '消耗功率',
            },
          ],
          title: {
            color: '#F56C6C',
            fontWeight: 600,
            fontSize: 14,
          },
          axisLabel: {
            show: true,
            color: '#2378f7',
            fontSize: 12,
          },
          itemStyle: {
            opacity: 1,
          },
          radius: '75%',
          axisLine: {
            lineStyle: {
              width: 1,
              color: [[1, abcolor]],
            },
          },
          // 设置刻度颜色
          axisTick: {
            lineStyle: {
              color: '#2378f7',
              opacity: 0.3,
            },
          },
          pointer: {
            length: '50%',
          },
        },
        {
          zlevel: 1,
          type: 'pie',
          radius: ['66%', '65%'],
          center: ['50%', '55%'], // 默认全局居中
          data: [
            {
              value: 3,
              itemStyle: {
                normal: {
                  borderWidth: 12,
                  borderColor: abcolor,
                },
              },
            },
            {
              value: 1,
              itemStyle: {
                opacity: 0,
              },
            },
          ],
          tooltip: { show: false },
          startAngle: 225,
          hoverAnimation: false,
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
}
</script>
<style lang="scss" scoped>
ul {
  height: 70px;
  > li {
    padding-left: 40%;
    color: #333;
    font-weight: normal;
    font-size: 12px;
    font-family: sans-serif;
    line-height: 25px;
    > span {
      color: #333;
      padding-left: 10px;
      font-weight: normal;
    }
  }
}
</style>
